<template>
  <div :class="
      'item ' +
      (theme == 'common' ? 'common-theme' : 'evening-theme') +
      (isChecked ? ' checked' : '')
    "
     :style="theme == 'evening' ? 'display: none;' : ''">

    <img v-show="F_Name=='物品领用'" src="../../assets/imgs/wgswply.png" />
    <img v-show="F_Name=='物品清单'" src="../../assets/imgs/wgswpqd.png" />
    <img v-show="F_Name=='补卡申请'" src="../../assets/imgs/wgsbuka.png" />
    <img v-show="F_Name=='差旅及招待报销'" src="../../assets/imgs/wgschail.png" />
    <img v-show="F_Name=='换班申请'" src="../../assets/imgs/wgshuanban.png" />
    <img v-show="F_Name=='排班申请'" src="../../assets/imgs/wgspaiban.png" />
    <img v-show="F_Name=='用印申请'" src="../../assets/imgs/wgsyongyin.png" />
    <img v-show="F_Name=='合同审批'" src="../../assets/imgs/wgshetong.png" />
    <img v-show="F_Name=='加班'" src="../../assets/imgs/wgsjiaban.png" />
    <img v-show="F_Name=='外派申请'" src="../../assets/imgs/wgswaipai.png" />
    <img v-show="F_Name=='出差'" src="../../assets/imgs/wgschuchai.png" />
    <img v-show="F_Name=='外出'" src="../../assets/imgs/wgswaichu.png" />
    <img v-show="F_Name=='请假'" src="../../assets/imgs/wgsqingjia.png" />
    <img v-show="F_Name=='酒水领用申请'" src="../../assets/imgs/wgsjiushuilingyong.png" />
    <img v-show="F_Name=='啤酒明细单'" src="../../assets/imgs/wgspijiu.png" />
    <img v-show="F_Name=='红酒水明细单'" src="../../assets/imgs/wgshongjiu.png" />
    <img v-show="F_Name=='白酒水明细单'" src="../../assets/imgs/wgsbaijiu.png" />
    <img v-show="F_Name=='图书借阅'" src="../../assets/imgs/tushujieyue.png" />
    <img v-show="F_Name=='图书购买需求单'" src="../../assets/imgs/tushugoumaixqd.png" />
    <img v-show="F_Name=='图书单'" src="../../assets/imgs/tushudan.png" />
    <img v-show="F_Name=='运营采购申请单'" src="../../assets/imgs/yunyincaigousqd.png" />
    <img v-show="F_Name=='名片印制申请'" src="../../assets/imgs/printCard.png" />
    <img v-show="F_Name=='技术方案协议等文件审批单'" src="../../assets/imgs/techlog.png" />
    <img v-show="F_Name=='通用审批'" src="../../assets/imgs/tongyongshenpi.png" />
    <img v-show="F_Name=='运营费用报销（汽油保险修理养护会议培训）'" src="../../assets/imgs/yyfybxqc.png" />
    <img v-show="F_Name=='运营收票管理'" src="../../assets/imgs/yyspgl.png" />
    <img v-show="F_Name=='收票管理'" src="../../assets/imgs/caigouspgl.png" />
    <img v-show="F_Name=='项目资料'" src="../../assets/imgs/programmerData.png" />
    <img v-show="F_Name=='备用金申请'" src="../../assets/imgs/beiyongjinshenqing.png" />
    <img v-show="F_Name=='招标审批'" src="../../assets/imgs/zhaobiaoshenpi.png" />
    <img v-show="F_Name=='预算审批'" src="../../assets/imgs/yusuanshenpi.png" />
    <img v-show="F_Name=='立项申请'" src="../../assets/imgs/lixiangshenqing.png" />
    <img v-show="F_Name=='指定采购审批表'" src="../../assets/imgs/zhidingcgspb.png" />
    <img v-show="F_Name=='定标审批'" src="../../assets/imgs/dingbiaoshenpi.png" />
    <img v-show="F_Name=='设备合同审批'" src="../../assets/imgs/shebeihetongsp.png" />
    <img v-show="F_Name=='耗材合同审批'" src="../../assets/imgs/haocaihetongsp.png" />
    <img v-show="F_Name=='日常办公合同审批'" src="../../assets/imgs/richangbanghtsp.png" />
    <img v-show="F_Name=='付款申请'" src="../../assets/imgs/fukuanshenqing.png" />
    <img v-show="F_Name=='设备供应商名录'" src="../../assets/imgs/wgs_sbgysl.png" />
    <img v-show="F_Name=='项目变更申请'" src="../../assets/imgs/wgs_xbgsq.png" />
    <img v-show="F_Name=='项目变更申请1'" src="../../assets/imgs/wgs_xbgsq.png" />
    <img v-show="F_Name=='招待会议需求单'" src="../../assets/imgs/wgs_zdhyxqd.png" />
    <img v-show="F_Name=='事项报批'" src="../../assets/imgs/wgs_sxbp.png" />
    <img v-show="F_Name=='项目采购清单'" src="../../assets/imgs/wgs_xmcgqd.png" />
    <img v-show="F_Name=='采购需求清单'" src="../../assets/imgs/wgs_cgxqqd.png" />
    <img v-show="F_Name=='耗材供应商名录'" src="../../assets/imgs/wgs_hcgysml.png" />
    <img v-show="F_Name=='车辆使用申请单'" src="../../assets/imgs/wgs_clsyqd.png" />
    <img v-show="F_Name=='证照管理'" src="../../assets/imgs/wgs_zzgl.png" />
    <img v-show="F_Name=='发文审批单'" src="../../assets/imgs/wgs_fwspd.png" />
    <img v-show="F_Name=='日常报销'" src="../../assets/imgs/wgsdaliy.png" />
    <img v-show="F_Name=='测试'" src="../../assets/imgs/wgsjiaban.png" />
    
    <div class="item-info">
      <!-- <p>{{$t('workFlow.WFCard.cardCode')}}：{{ F_Code }}</p> -->
      <p>{{$t('workFlow.WFCard.cardName')}}：{{ F_Name }}</p>
      <p>{{$t('workFlow.WFCard.cardClassify')}}：{{ F_Category }}</p>
    </div>
    <i class="el-icon-check" :class="isChecked ? 'checked' : ''"></i>
  </div>
</template>

<script>
export default {
  props: {
    theme: {
      type: String,
      default: "common",
    },
    isChecked: {
      type: Boolean,
      default: false,
    },
    F_Code: {
      type: String,
      default: "",
    },
    F_Name: {
      type: String,
      default: "",
    },
    F_Category: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.item i {
  display: none;
}
.item img {
  float: left;
  width: 66px;
  height: 66px;
  margin-right: 15px;
}

.item .item-info {
  padding-left: 81px;
  box-sizing: border-box;
}
.item.checked .item-info p{
	color:#409eff ;
}
.item .item-info p {
  height: 22px;
  margin: 0;
  font-size: 12px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item i.checked {
  display: none;
  position: absolute;
  right: 0px;
  top: 0;
  color: #fff;
  width: 0;
  height: 0;
  border-width: 0 30px 30px 0px;
  border-style: solid;
  border-color: #f56c6c #f56c6c transparent transparent;
  font-weight: bold;
  font-size: 14px;
  text-indent: 1em;
  line-height: 20px;
}

.item {
  padding:10px 0px 5px 5px !important;	
  width: 100%;
  
  color: #303133;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 2px;
  overflow: hidden;
  transition: 0.3s;
  box-sizing: border-box!important;
  position: relative;
}

.item.checked {
 background-color: rgba(64, 158, 255, 0.06) !important;
 border: 1px solid rgba(64, 158, 255, 0.4) !important;
}
</style>
